<script setup>
import { reactive, ref } from "vue";
import { useRouter } from "vue-router";
import userApi from "@/api/userApi";
import tool from "@/utils/tool";

const router = useRouter();
const loginForm = ref();
const verifyCodeData = ref('');
const verifyCodeKey = ref('');
const loading = ref(false);

let accountInfo = ref({
  account: "",
  password: "",
});

const login = (values) => {
  loading.value = true;
  values.verifyTk = verifyCodeKey.value;
  userApi
    .login(values)
    .then((res) => {
      tool.data.set("tokenName", res.tokenName);
      tool.data.set("tokenValue", res.tokenValue);
      tool.data.set("loginId", res.loginId);
      loading.value = false;
      router.push({
        path: "/",
      });
    })
    .catch((error) => {
      loading.value = false;
    });
};

const init = () => {
  let token = tool.data.get("tokenValue");
  if (token) {
    router.push({
      path: "/",
    });
  }
};

const getVerify = () => {
  userApi.getVerify().then(res => {
    verifyCodeKey.value = res.tk;
    verifyCodeData.value = res.tv;
  })
}

init();
getVerify();
</script>
<template>
  <div class="login-con flex flex-center">
    <div class="login-form">

      <div class="login">
        <div class="component66">
          <img src="@/assets/logo.png" class="logo" />
          <div class="header">
            <p class="title">Welcome</p>
            <p class="text">
              <span class="text">Login </span>
              <span class="text"> Crew Infomation Manager System </span>
            </p>
          </div>
        </div>
        <a-spin :loading="loading" tip="正在登录..." style="width: 80%;">
          <div class="form">
            <a-form ref="loginForm" auto-label-width :model="accountInfo" @submit-success="login">
              <a-form-item field="account" :rules="[{ required: true, message: '请输入用户名' }]">
                <a-input v-model="accountInfo.account" placeholder="输入用户名">
                  <template #prefix>
                    <icon-user />
                  </template>
                </a-input>
              </a-form-item>
              <a-form-item field="password" :rules="[{ required: true, message: '请输入密码' }]">
                <a-input v-model="accountInfo.password" type="password" placeholder="输入密码">
                  <template #prefix>
                    <icon-lock />
                  </template>
                </a-input>
              </a-form-item>
              <a-form-item field="verifyCode" :rules="[{ required: true, message: '请输入验证码' }]">
                <a-input v-model="accountInfo.verifyCode" placeholder="输入验证码">
                  <template #prefix>
                    <icon-safe />
                  </template>
                  <template #append>
                    <img :src="verifyCodeData" @click="getVerify" style="width: 100%;height: 40px;" />
                  </template>
                </a-input>
              </a-form-item>
              <a-form-item>
                <a-space direction="vertical" size="large" style="width: 100%;">
                  <a-button type="primary" long html-type="submit" size="large">
                    Login
                  </a-button>
                </a-space>
              </a-form-item>
            </a-form>
          </div>
        </a-spin>
      </div>
    </div>
  </div>
</template>
<style scoped>
.login-con {
  width: 100%;
  height: 100%;
  background-image: url(@/assets/login-bg.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

.login-form {
  align-items: center;
  display: flex;
  flex-basis: 0;
  flex-direction: column;
  flex-grow: 1;
  justify-content: center;
  padding: 10px;
  row-gap: 10px;
  align-self: stretch;
}

.login-form .login {
  align-items: center;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 8px;
  box-shadow: 0px 4px 14px 0px #0000001a, 0px 0px 1px 0px #0000004d;
  display: flex;
  flex-direction: column;
  height: 450px;
  padding: 48px 56px;
  row-gap: 30px;
  width: 440px;
  flex-shrink: 0;
}

.login-form .login .component66 {
  align-items: center;
  border-radius: 8px;
  display: inline-flex;
  flex-direction: column;
  row-gap: 24px;
  flex-shrink: 0;
}

.login-form .login .component66 .logo {
  height: 72px;
  width: 72px;
  flex-shrink: 0;
}

.login-form .login .component66 .header {
  align-items: center;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  row-gap: 6px;
  flex-shrink: 0;
}

.login-form .login .component66 .header .title {
  color: var(--semi-color-text-0);
  font-size: 32px;
  font-weight: 600;
  line-height: 44px;
  min-width: 128px;
  vertical-align: middle;
  flex-shrink: 0;
}

.login-form .login .component66 .header .text {
  color: var(--semi-color-text-2);
  font-size: 16px;
  font-weight: 400;
  line-height: 22px;
  min-width: 163px;
  vertical-align: middle;
  flex-shrink: 0;
}

.login-form .login .form {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  row-gap: 28px;
  align-self: stretch;
}

.login-form .login .form .inputs {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  row-gap: 24px;
  align-self: stretch;
}

.login-form .login .form .button {
  height: 40px;
  width: 440px;
}
</style>